<template lang="pug">
a-space.corner(size="small" direction="vertical")
  a(@click.prevent.stop="$emit('speak')")
    Mic.icon
  a(@click.prevent.stop="$emit('search')")
    Station.icon
  a(@click.prevent.stop="$emit('location')")
    Position.icon
</template>

<script lang="ts" setup>
import Position from '@/assets/cars/position.svg'
import Station from '@/assets/cars/station.svg'
import Mic from '@/assets/cars/mic.svg'

defineEmits<{ (e: 'search'): void, (e: 'location'): void, (e: 'speak'): void }>()

</script>

<script lang="ts">
export default {
  name: 'Corner'
}
</script>

<style lang="scss" scoped>
.corner {
  position: absolute;
  bottom: 10px;
  z-index: 100;
  right: 10px;
  .icon {
    width: 40px;
    height: 40px;
  }
}
</style>
